<template>
  <div style="width: 100%; height: 80%; position: relative">

    {{currentTime}}
    <vue3VideoPlay
        muted
        :width="vue3VideoPlayoptions.width"
        :height="vue3VideoPlayoptions.height"
        :src="require('../assets/1.mp4')"
        :type="vue3VideoPlayoptions.type"
        autoPlay
        :controlBtns="vue3VideoPlayoptions.controlBtns"
        :currentTime="currentTime"
        @ended="ended"
        @timeupdate="timeupdate"
        @pause="pause"
    />




  </div>
</template>

<script setup>
import { reactive, ref } from "vue";


const ended = (event) => {
  alert(1)
  console.log("视频播放结束");
  console.log(event);
};

const currentTime = ref(10)

const pause = (event) => {
  console.log("视频暂停");
  console.log(event.target.currentTime);
};

const timeupdate = (event) => {
  // console.log("视频播放进度", event.target.currentTime);
};


const vue3VideoPlayoptions = reactive({
  src:"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频地址
  type: "video/mp4", //视频类型
  width: "50%", //播放器高度
  height: "50%", //播放器高
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: false, //是否显示控制
  speed: false,
  preload: "meta",
  controlBtns: [
    "audioTrack", //音轨切换按钮
    "quality", //视频质量切换按钮
    // "speedRate",//速率切换
    "volume", //音量
    // "setting",//设置
    "pip", //画中画按钮
    "pageFullScreen", //网页全屏按钮
    "fullScreen", //全屏按钮
  ], //显示所有按钮,
});
</script>

<style lang="scss" scoped>
</style>